{{template "goods_layout.html" . }}
{{define "layoutcontent"}}
	<div class="breadcrumb">
		<a href="/">全部分类</a>
		<span>></span>
		{{range $index,$value:=.types}}
		<!-- 与list页面不同，此页面并没有后台回传的”typeId“,但是有goodssku包含这个信息，利用它获取 -->
			{{if compare .Id  $.goodssku.GoodsType.Id }}
				<a href="/goodsList?typeId={{.Id}}">{{.Name}}</a>
			{{end}}
		{{end}}
		<span>></span>
		<a href="#">商品详情</a>
	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img src="http://94.191.18.219:8888/{{.goodssku.Image}}"  style="width: 350px"></div>

		<div class="goods_detail_list fr">
			<form action="/user/showOrder" method="POST" onsubmit="return checkCount()">
				<h3>{{.goodssku.Name}}</h3>
				<p>{{.goodssku.Desc}}</p>
				<div class="prize_bar">
					<span class="show_pirze">¥<em>{{.goodssku.Price}}</em></span>
					<span class="show_unit">单  位：{{.goodssku.Unite}}</span>
				</div>
				<div class="goods_num clearfix">
					<div class="num_name fl">数 量：</div>
					<div class="num_add fl">
						<input type="text" name="goodsCount" class="num_show fl" value="1" stock={{.goodssku.Stock}}>
						
						<a href="javascript:;" class="add fr">+</a>
						<a href="javascript:;" class="minus fr">-</a>	
					</div> 
				</div>
				<div>

				</div>
				<div class="show_unit">库  存：{{.goodssku.Stock}}</div>
				<div class="total">总价：<em>元</em></div>
				
				<div class="operate_btn">
					<input  type="hidden" name="source"  value=1 >
					<input  type="hidden" name="skuid"  value="{{.goodssku.Id}}" >
						<input type="submit"   class="buy_btn" name="" value="立即购买">
						<!-- <a href="javascript:;" class="buy_btn">立即购买</a> -->
					<!-- 给购物车添加自定义属性skuid，以传递值给js处理 -->
					<a href="javascript:;" class="add_cart" id="add_cart" skuid="{{.goodssku.Id}}">加入购物车</a>				
				</div>
			</form>
			
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					{{range .goodsNew}}
						<li>
							<a href="/goodsDetail?id={{.Id}}"><img src="http://94.191.18.219:8888/{{.Image}}"></a>
							<h4><a href="/goodsDetail?id={{.Id}}">{{.Name}}</a></h4>
							<div class="prize">{{.Price}}</div>
						</li>
					{{end}}
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active">商品介绍</li>
				<li>评论</li>
			</ul>

			<div class="tab_content">
				<dl>
					<dt>商品详情：</dt>
					<dd> {{.goodssku.Goods.Detail}} </dd>
				</dl>
			</div>

		</div>
	</div>
{{end}}
{{define "js"}}
	<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
	// 直接购买使用form表单提交到订单处理页，需要先校验数据
	function checkCount(){
		count=$('input[name="goodsCount"]').val()
		// alert(count)
		stock=$('input[name="goodsCount"]').attr('stock')
		if (parseInt(stock)<1){
			alert("库存不足，请等待商品补充库存")
			return false
		}else if(parseInt(count)>parseInt(stock)){
			msg="购买数量超出商品库存："+stock
			alert(msg)
			$('input[name="goodsCount"]').val(stock)
			return false
		}
		
	}
	// 加购后购买，先以异步post请求提交到购物车页面，无需校验数据
	UpdateGoodsPrice()
	function UpdateGoodsPrice(){
		//获取单价和数量
		price=$('.show_pirze').children('em').text()
		count=$('.num_show').val()
		price=parseFloat(price)
		count=parseInt(count)
		total=price*count
		//把总价更新
		$('.total').children('em').text(total.toFixed(2)+'元')
	}
	// 增加商品数量
	$('.add').click(function(){
		// 获取数量
		count=$('.num_show').val()
		count=parseInt(count)+1
		// 判断库存,超出则设置为库存
		stock=$('input[name="goodsCount"]').attr('stock')
		stock=parseInt(stock)
		if (parseInt(stock)<1){
			alert("库存不足，请等待商品补充库存")
			return
		}else if(count>stock){
			msg="超出最大库存："+stock
			alert(msg)
			count=stock
		}
		// 展示数量
		$('.num_show').val(count)
		// 更新总价
		UpdateGoodsPrice()
	})
	// 减少商品数量
	$('.minus').click(function(){
		// 获取数量
		count=$('.num_show').val()
		
		if(count>1){
			count=parseInt(count)-1
		}else{
			count=1
		}
		// 展示数量
		$('.num_show').val(count)
		// 更新总价
		UpdateGoodsPrice()
	})
	//手动输入商品数量
	$('.num_show').blur(function(){
		count = $(this).val()
		//校验数据
		if(isNaN(count) || count.trim().length==0 || parseInt(count) < 1){
			count = 1
		}
		// 判断库存,超出则设置为库存
		stock=$('input[name="goodsCount"]').attr('stock')
		stock=parseInt(stock)
		count=parseInt(count)
		if(count>stock){
			msg="超出最大库存："+stock
			alert(msg)
			count=stock
		}
		$(this).val(count)
		UpdateGoodsPrice()
	})

		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;
		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;
// 加入购物车
		$('#add_cart').click(function(){
				// 判断库存是否为0
			stock=$('input[name="goodsCount"]').attr('stock')
			if (parseInt(stock)<1){
				alert("库存不足，请等待商品补充库存")
				return
			}
			// ajaks
			// 获取购物车的href属性
			// $('#add_cart').prop('href') 
			// 获取购物车的自定义属性skuid
			skuid = $('#add_cart').attr('skuid')
			// alert并非格式化输出，不要当成println来用
			// alert(skuid)
			count = $('.num_show').val()
			// alert(count)
			// 构建一个json字符串
			param={"skuid":skuid,"count":count}
			$.post('/user/addCart',param,function(data){
				if(data.code==undefined){
				　window.location.href="/login";
				}else	if(data.code == 5){
					$(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
					$(".add_jump").stop().animate(
						{'left': $to_y+7,'top': $to_x+7},
						"fast", 
						function() {
							$(".add_jump").fadeOut('fast',
								function(){
								$('#show_count').html(data.cartCount);
								}
							);
					});
					// alert(data.cartCount)
				}else{
					alert(data.msg)
				}
			})

			
		})
		
		// $('.buy_btn').click(function(){
		// 	param={}
		// 	$.post('/user/showOrder',param,function(data){
		// 		if(data==undefined){

		// 		}
		// 	})
		// })
		
		</script>
	{{end}}